<template>
  <div>
    <el-card shadow="never">
      <header-title title="检测信息管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <div>
            商户名称: <el-input v-model="searchName" placeholder="请输入内容" size="small" style="margin-left: 15px;width: 200px;"></el-input>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button @click="add" class="button" size="small" round>填写检测信息</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="detectionInfoData" v-loading="loading" style="width: 100%">
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="sampleName" label="产品名称"></el-table-column>
          <el-table-column prop="testResults" label="检测值"></el-table-column>
           <el-table-column prop="isQualified" label="检测结论"></el-table-column>
          <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeDetectionInfoPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="填写检测信息" :visible.sync="detectionDialog" @close="close">
      <div>
        <el-form :model="modal" label-width="100px" :rules="rules" ref="rules">
          <el-form-item label="样品名称：" prop="sampleName">
            <my-select ref="smySelect" url="api/v1/backend/public/product" @selected='mySelectedSampleName'></my-select>
          </el-form-item>
          <el-form-item label="商户信息：" prop="businessId">
            <my-select ref="bmySelect" url="api/v1/backend/public/business" @selected='mySelectedBusinessName'></my-select>
          </el-form-item>
          <el-form-item label="检测值：" prop="testResults">
            <el-radio-group v-model="modal.testResults">
              <el-radio :label="1">阳性</el-radio>
              <el-radio :label="2">阴性</el-radio>
              <el-radio :label="3">疑似阳性</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="检测结论：" prop="isQualified">
            <el-radio-group v-model="modal.isQualified">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="0">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('rules')">提交检测信息</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import MySelect from "@/components/MySelect"
import { mapState } from "vuex"
export default {
  name: 'DetectionInfo',
  components: {
    HeaderTitle,
    MySelect
  },
  data(){
    return {
      loading: true,
      detectionInfoData: [],
      searchName: '',
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      detectionDialog: false,
      modal: {
        sampleName: '',
        businessId: '',
        testResults: '',
        isQualified: ''
      },
      rules: {
        sampleName: [
          { required: true, message: "请输入样品名称", trigger: "change" }
        ],
        businessId: [
          { required: true, message: "请输入商户信息", trigger: "change" }
        ],
        testResults: [
          { required: true, message: "请选择检测值", trigger: "change" }
        ],
         isQualified: [
          { required: true, message: "请选择检测结论", trigger: "change" }
        ],
        },
    }
  },
  computed:{
    ...mapState('app',['marketId'])
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getDetectionInfo(this.searchName, this.perPage, this.page)
    }
  },
  mounted(){
    this.getDetectionInfo(this.searchName, this.perPage, this.page)
  },
  methods:{
    // 获取检测信息列表
    getDetectionInfo(searchName,perPage,page){
      this.$store.dispatch('detectionInfo/fetchDetectionInfoList',{searchName,perPage,page}).then(
        data => {
          this.loading = false
          for(let i = 0; i < data.items.length; i++){
            if(data.items[i].isQualified === 1){
              data.items[i].isQualified = '合格'
            }else if(data.items[i].isQualified === 0){
              data.items[i].isQualified = '不合格'
            }
            if(data.items[i].testResults === '1'){
              data.items[i].testResults = '阳性'
            }else if(data.items[i].testResults === '2'){
              data.items[i].testResults = '阴性'
            }else if(data.items[i].testResults === '3'){
              data.items[i].testResults = '疑似阳性'
            }
          }
          this.detectionInfoData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.detectionInfoData = []
        this.total = 0
      })
    },
    search(){
      this.page = 1
      this.getDetectionInfo(this.searchName, this.perPage, this.page)
    },
    changeDetectionInfoPage(num){
      this.page = num
      this.getDetectionInfo(this.searchName, this.perPage, num)
    },
    // 点击填写检测信息
    add(){
      this.detectionDialog = true
    },
    close(){
      this.clear()
    },
    clear(){
      this.modal = {}
    },
    mySelectedSampleName(obj){
      this.modal.sampleName = obj.label
    },
    mySelectedBusinessName(obj){
      this.modal.businessId = obj.value
    },
    // 提交检测信息
    submit(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
      
      this.$store.dispatch("detectionInfo/submit", this.modal).then(data=>{
        if(data){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
           this.getDetectionInfo(this.searchName, this.perPage, this.page)
           this.detectionDialog = false
        }
      })
         } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>

